<template>
  <div class="login-container">
    <!--引入粒子特效-->
    <a-form
      ref="formRef"
      :model="loginForm"
      class="login-form"
      :rules="loginRules"
    >
      <h3 class="title">婚恋系统</h3>
      <a-form-item name="username">
        <a-input
          v-model:value="loginForm.username"
          placeholder="请输入账号或手机号"
          autocomplete="on"
        />
      </a-form-item>
      <a-form-item name="password">
        <a-input-password
          v-model:value="loginForm.password"
          type="password"
          placeholder="请输入密码"
          autocomplete="on"
        />
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          @click="onSubmit"
          style="width: 100%"
          :loading="loading"
          >登录</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { LoginParams } from "@/api/user/login";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user/user";
import { UnwrapRef } from "vue";

interface loginForm {
  username: string;
  password: string;
}
const formRef = ref();
const router = useRouter();
const userStore = useUserStore();
const loginForm: UnwrapRef<loginForm> = reactive({
  username: "",
  password: "",
});

const loginRules: any = {
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, message: "密码最少五位", trigger: "blur" },
  ],
};

const loading = ref<boolean>(false);

const onSubmit = () => {
  loading.value = true;
  formRef.value
    .validate()
    .then(async () => {
      let param: LoginParams = {
        username: loginForm.username,
        password: loginForm.password,
      };
      const res = await userStore.login(param);
      if (res) {
        router.push("/");
      }
    })
    .catch((error: ValidateErrorEntity<loginForm>) => {
      console.log("error", error);
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;

/* reset element-ui css */
.login-container {
  .a-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;

      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }

  .a-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-image: url("./love.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    max-width: 100%;
    padding: 35px;
    margin: 120px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); // 添加阴影
    background: rgba(255, 255, 255, 0.7); // 提高透明度
  }

  .a-form-item {
    margin-bottom: 15px; // 增加间距
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    color: #454545;
  }

  .title {
    font-size: 30px; // 增加字体大小
    font-weight: bold;
    color: #ff7f50; // 可以改成更柔和的颜色
    margin: 0 auto 40px;
    text-align: center;
  }
}

</style>
